{%- liquid
      assign mark = 'h2'
    if section.settings.enable_adjust_h_tag
      assign mark = section.settings.adjust_h_tag_to
    endif
-%}
{%- assign section_identifier = '#shopify-section-' | append: section.id -%}
{%- assign  padding_top = section.settings.padding_top | append:'px' -%}
{%- assign  padding_bottom = section.settings.padding_bottom | append:'px' -%}

{%- assign padding_mobile_top = section.settings.padding_top_mob | append: 'px' -%}
{%- assign padding_mobile_bottom = section.settings.padding_bottom_mob | append: 'px' -%}

{%- style -%}
{{ section_identifier }} {
    padding-top: {{padding_top}};
    padding-bottom: {{padding_bottom}};
  }

 @media only screen and (max-width: 430px) {
    {{ section_identifier }} {
      padding-top: {{ padding_mobile_top }};
      padding-bottom: {{ padding_mobile_bottom }};
    }
  }

  :root {
    --masonry-gap: {{ section.settings.gap_size }}px;
    --overlay-gradient: linear-gradient(to bottom, {{ section.settings.overlay_color | color_modify: 'alpha', 0 }} 0%, {{ section.settings.overlay_color | color_modify: 'alpha', section.settings.overlay_opacity }} 100%);
  }


  {{ section_identifier }} .gallery-tab {
    color: {{ settings.colors.text }};
    background: var(--color-{{ section.settings.color_scheme }}, #fff);
  }


  {{ section_identifier }} .gallery-title {
    color: {{ section.settings.heading_color }};
  }

 

  {{ section_identifier }} .gallery-tab-button.active {
    background: {{ section.settings.tab_active_color }};
    color: {{ section.settings.tab_text_color }};
  }

  {{ section_identifier }} .gallery-grid {
    display: grid;
    grid-template-columns: repeat({{ section.settings.columns_desktop }}, 1fr);
    gap: var(--masonry-gap);
    {% if section.settings.enable_masonry %}
    grid-auto-flow: dense;
    grid-auto-rows: var(--masonry-base-height);
    {% endif %}
  }

  {{ section_identifier }} .gallery-item {
    {% unless section.settings.enable_masonry %}
    aspect-ratio: 4/3;
    {% endunless %}
  }


  @media screen and (max-width: 989px) {
    
    {{ section_identifier }}  .gallery-grid {
      grid-template-columns: repeat({{ section.settings.columns_tablet }}, 1fr);
    }
  }

  @media screen and (max-width: 749px) {
    {{ section_identifier }}  .gallery-grid {
      grid-template-columns: repeat({{ section.settings.columns_mobile | default: 1 }}, 1fr);
    }
  }



  /* Responsive adjustments */
  @media screen and (min-width: 990px) {
    {{ section_identifier }}  .gallery--masonry-layout {
      grid-template-columns: repeat({{ section.settings.columns_desktop }}, 1fr);
    }
  }

  @media screen and (min-width: 820px) and (max-width: 989px) {
    {{ section_identifier }}  .gallery--masonry-layout {
      grid-template-columns: repeat({{ section.settings.columns_tablet }}, 1fr);
    }
    
    /* Adjust horizontal items on tablet */
    .gallery-item.gallery-item--masonry[data-masonry-size="horizontal"] {
      grid-column: span {{ section.settings.columns_tablet }};
    }
  }

  @media screen and (max-width: 820px) {
    {{ section_identifier }}  .gallery--masonry-layout {
      grid-template-columns: repeat({{ section.settings.columns_mobile }}, 1fr);
    }
    
  }


{%- if section.settings.column_text_position == 'overlay' -%}
  @media screen and (max-width: 430px) {
    {{ section_identifier }}  .gallery-item.gallery-item--masonry[data-masonry-size="vertical"] .gallery-item__media .gallery-item__video-container {
      height: 100%;
    }
    {{ section_identifier }}   .gallery--masonry-layout{
     grid-auto-rows: auto;
  }
  {{ section_identifier }}  .gallery-item.gallery-item--masonry[data-masonry-size="vertical"] {
    height: 303px;
  }
  {{ section_identifier }}  .gallery-item.gallery-item--masonry[data-masonry-size="default"] {
      height: 195px;
  }
  
}
  {%- elsif section.settings.column_text_position == 'bottom' -%}

    @media screen and (max-width: 430px) {
      {{ section_identifier }}   .gallery--masonry-layout{
      grid-auto-rows: auto;
    }
    {{ section_identifier }}  .gallery-item__overlay {
      opacity: 0 !important;
      pointer-events: none !important;
      display: none;
    }
    {{ section_identifier }}    .gallery-item__overlay-mobile  {
      display: block;
      margin-top: 0;
      margin-bottom: 0;
    }
    {{ section_identifier }}  .gallery-item__overlay-mobile .gallery-item__description, {{ section_identifier }}  .gallery-item__overlay-mobile .gallery-item__title {
        color: #000;
        padding: 10px 0 0 0;
        margin-bottom: 0px;
    }
    {{ section_identifier }}  .gallery-item__overlay-mobile .gallery-item__title{
      font-size: 24px;
    }
    {{ section_identifier }} .gallery-item.gallery-item--masonry,
    {{ section_identifier }} .gallery-item.gallery-item--masonry[data-masonry-size="default"],
    {{ section_identifier }} .gallery-item.gallery-item--masonry[data-masonry-size="vertical"] {
        grid-row: unset;
        grid-column: unset;
    }
    {{ section_identifier }} .gallery-item.gallery-item--masonry {
          display: flex;
          flex-direction: column;
      }
      {{ section_identifier }} .gallery-item__media {
      border-radius: 8px;
      overflow: inherit;
    }
    {{ section_identifier }} .gallery-item.gallery-item--masonry[data-masonry-size="vertical"] .gallery-item__media .gallery-item__video-container {
        height: 264px;
    }
    {{ section_identifier }} .gallery-item.gallery-item--masonry[data-masonry-size="vertical"] {
      height: 303px;
    }
    {{ section_identifier }} .gallery-item.gallery-item--masonry[data-masonry-size="default"] {
        height: 195px;
    }
}

  {%- elsif section.settings.column_text_position == 'top' -%}
    @media screen and (max-width: 430px) {
    {{ section_identifier }}  .gallery--masonry-layout{
      grid-auto-rows: auto;
    } 
    {{ section_identifier }}  .gallery-item__overlay {
      opacity: 0 !important;
      pointer-events: none !important;
      display: none;
    }
    {{ section_identifier }}  .gallery-item__overlay-mobile  {
      display: block;
      margin-top: 0;
      margin-bottom: 0;
    }
    {{ section_identifier }}  .gallery-item__overlay-mobile .gallery-item__description, {{ section_identifier }}  .gallery-item__overlay-mobile .gallery-item__title {
        color: #000;
        padding: 0 0 10px 0;
        margin-bottom: 0px;
    }
    {{ section_identifier }}  .gallery-item.gallery-item--masonry,
    {{ section_identifier }}  .gallery-item.gallery-item--masonry[data-masonry-size="default"],
    {{ section_identifier }}  .gallery-item.gallery-item--masonry[data-masonry-size="vertical"] {
        grid-row: unset;
        grid-column: unset;
    }
    {{ section_identifier }}  .gallery-item.gallery-item--masonry {
          display: flex;
          flex-direction: column-reverse;
      }
      {{ section_identifier }}  .gallery-item__media {
      border-radius: 8px;
      overflow: inherit;
    }
    {{ section_identifier }}  .gallery-item.gallery-item--masonry[data-masonry-size="vertical"] .gallery-item__media .gallery-item__video-container {
        height: 264px;
    }
    {{ section_identifier }}  .gallery-item.gallery-item--masonry[data-masonry-size="vertical"] {
      height: 303px;
    }
    {{ section_identifier }}  .gallery-item.gallery-item--masonry[data-masonry-size="default"] {
        height: 195px;
    }
}
  {%- endif -%}

{%- endstyle -%}

<gallery-tab class="gallery-tab container">
    {%- if section.settings.title != blank or section.settings.section_description != blank -%}
        <div class="gallery-header">
            {%- if section.settings.title != blank -%}
                <{{ mark }} class="gallery-title section-title">{{ section.settings.title }}</{{ mark }}>
            {%- endif -%}
            {%- if section.settings.section_description != blank -%}
                <div class="gallery-subtitle">{{ section.settings.section_description }}</div>
            {%- endif -%}
        </div>
    {%- endif -%}
  <div class="container">
  <div class="gallery-tabs">
   <div class="tab-inner-content">
     {%- for block in section.blocks -%}
      {%- if block.type == 'tab' -%}
        <button class="gallery-tab-button {% if forloop.first %}active{% endif %}"
                type="button"
                id="tab-{{ block.settings.tab_id }}"
                data-tab="{{ block.settings.tab_id }}"
                aria-controls="panel-{{ block.settings.tab_id }}">
          {{ block.settings.title }}
        </button>
      {%- endif -%}
     {%- endfor -%}
   </div>
  </div>
  {%- for tab in section.blocks -%}
    {%- if tab.type == 'tab' -%}
      {% assign tab_id = tab.settings.tab_id %}
      <div class="gallery-grid {% if section.settings.enable_masonry %}gallery--masonry-layout{% endif %}" 
           id="panel-{{ tab_id }}"
           data-tab-content="{{ tab_id }}" 
           aria-labelledby="tab-{{ tab_id }}"
           {% unless forloop.first %}hidden{% endunless %}>
        {%- for block in section.blocks -%}
          {%- if block.type == 'gallery_item' and block.settings.tab_id == tab_id -%}
            <div class="gallery-item {% if section.settings.enable_masonry %}gallery-item--masonry{% endif %}" data-masonry-size="{{ block.settings.masonry_size }}" {{ block.shopify_attributes }}>
              <div class="gallery-item__media">
                {%- case block.settings.content_type -%}
                  {%- when 'image' -%}
                    {%- if block.settings.desktop_image != blank -%}
                      <div class="media-wrapper desktop" style="--aspect-ratio: {{ block.settings.desktop_image.aspect_ratio | default: 1.33 }};">
                         <img
                            srcset="{{ block.settings.desktop_image | image_url: width: 375 }} 375w,
                                    {{ block.settings.desktop_image | image_url: width: 550 }} 550w,
                                    {{ block.settings.desktop_image | image_url: width: 750 }} 750w,
                                    {{ block.settings.desktop_image | image_url: width: 1100 }} 1100w,
                                    {{ block.settings.desktop_image | image_url: width: 1500 }} 1500w"
                            src="{{ block.settings.desktop_image | image_url: width: 1500 }}"
                            sizes="(max-width: 749px) 100vw, (min-width: 750px) 50vw"
                            alt="{{ block.settings.desktop_image.alt | escape }}"
                            width="{{ block.settings.desktop_image.width }}"
                            height="{{ block.settings.desktop_image.height }}"
                            loading="lazy"
                            class="gallery-item__image"
                          >
                      </div>
                      {%- if block.settings.mobile_image != blank -%}
                        <div class="media-wrapper mobile" style="--aspect-ratio: {{ block.settings.mobile_image.aspect_ratio | default: 1.33 }};">
                          <img
                              srcset="{{ block.settings.mobile_image | image_url: width: 375 }} 375w,
                                      {{ block.settings.mobile_image | image_url: width: 550 }} 550w,
                                      {{ block.settings.mobile_image | image_url: width: 750 }} 750w,
                                      {{ block.settings.mobile_image | image_url: width: 1100 }} 1100w,
                                      {{ block.settings.mobile_image | image_url: width: 1500 }} 1500w"
                              src="{{ block.settings.mobile_image | image_url: width: 1500 }}"
                              sizes="(max-width: 749px) 100vw, (min-width: 750px) 50vw"
                              alt="{{ block.settings.mobile_image.alt | escape }}"
                              width="{{ block.settings.mobile_image.width }}"
                              height="{{ block.settings.mobile_image.height }}"
                              loading="lazy"
                              class="gallery-item__image"
                            />
                        </div>
                        {% else %}
                          <div class="media-wrapper mobile" style="--aspect-ratio: {{ block.settings.desktop_image | default: 1.33 }};">
                            <img
                                srcset="{{ block.settings.desktop_image | image_url: width: 375 }} 375w,
                                        {{ block.settings.desktop_image | image_url: width: 550 }} 550w,
                                        {{ block.settings.desktop_image | image_url: width: 750 }} 750w,
                                        {{ block.settings.desktop_image | image_url: width: 1100 }} 1100w,
                                        {{ block.settings.desktop_image | image_url: width: 1500 }} 1500w"
                                src="{{ block.settings.desktop_image | image_url: width: 1500 }}"
                                sizes="(max-width: 749px) 100vw, (min-width: 750px) 50vw"
                                alt="{{ block.settings.desktop_image.alt | escape }}"
                                width="{{ block.settings.desktop_image.width }}"
                                height="{{ block.settings.desktop_image.height }}"
                                loading="lazy"
                                class="gallery-item__image"
                              />
                          </div>
                      {% endif %}
                    {%- else -%}
                      {{ 'image' | placeholder_svg_tag: 'gallery-item__image placeholder' }}
                    {%- endif -%}
                  
                  {%- when 'video' -%}
                    <div class="gallery-item__video-container" data-video-container data-video-type="{{ block.settings.video_type | default: 'shopify' }}" data-autoplay="{{ block.settings.autoplay | default: false }}" data-loop="{{ block.settings.loop | default: true }}">
                      {%- if block.settings.poster_image != blank -%}
                        {{ block.settings.poster_image | image_url: width: 1500 | image_tag:
                          loading: 'lazy',
                          class: 'gallery-item__image poster-image',
                          sizes: '(max-width: 749px) 100vw, (min-width: 750px) 50vw',
                          widths: '375, 550, 750, 1100, 1500'
                        }}
                      {%- endif -%}

                      <button class="play-button" type="button" aria-label="Play video">
                        {%- render 'icon' with 'custom-play', class: 'custom-play-btn' -%}
                      </button>

                      {%- case block.settings.video_type | default: 'shopify' -%}
                        {%- when 'shopify' -%}
                          {%- if block.settings.video_shopify != blank -%}
                            <div class="desktop-only media-wrapper" style="--aspect-ratio: {{ block.settings.video_shopify.aspect_ratio | default: 1.777778 }}">
                              {{ block.settings.video_shopify | video_tag: 
                                class: 'gallery-item__video',
                                controls: true,
                                autoplay: true,
                                muted: true,
                                loop: block.settings.loop | default: true,
                                playsinline: true,
                                preload: "metadata"
                              }}
                            </div>
                            {%- if block.settings.video_shopify_mobile != blank -%}
                              <div class="mobile-only media-wrapper" style="--aspect-ratio: {{ block.settings.video_shopify_mobile.aspect_ratio | default: 1.777778 }}">
                                {{ block.settings.video_shopify_mobile | video_tag: 
                                  class: 'gallery-item__video',
                                  controls: true,
                                  autoplay: true,
                                  muted: true,
                                  loop: block.settings.loop | default: true,
                                  playsinline: true,
                                  preload: "metadata"
                                }}
                              </div>
                            {%- endif -%}
                          {%- endif -%}
                        {%- when 'external' -%}
                          {%- if block.settings.video_url contains "youtube.com" or block.settings.video_url contains "youtu.be" -%}
                            <iframe
                              class="gallery-item__video"
                              src="{{ block.settings.video_url }}?enablejsapi=1&controls=1&mute=1&playsinline=1&showinfo=1{% if block.settings.autoplay %}&autoplay=1{% endif %}{% if block.settings.loop %}&loop=1{% endif %}"
                              allow="autoplay; encrypted-media"
                              allowfullscreen
                            ></iframe>
                          {%- elsif block.settings.video_url contains "vimeo.com" -%}
                            <iframe
                              class="gallery-item__video"
                              src="{{ block.settings.video_url }}?api=1&controls=1&background=0{% if block.settings.autoplay %}&autoplay=1{% endif %}{% if block.settings.loop %}&loop=1{% endif %}"
                              allow="autoplay; encrypted-media"
                              allowfullscreen
                            ></iframe>
                          {%- endif -%}
                      {%- endcase -%}
                    </div>

                    <div class="gallery-item__overlay">
                      {%- if block.settings.title != blank -%}
                        <h3 class="gallery-item__title">{{ block.settings.title }}</h3>
                      {%- endif -%}
                      {%- if block.settings.description != blank -%}
                        <div class="gallery-item__description">{{ block.settings.description }}</div>
                      {%- endif -%}
                    </div>
                {%- endcase -%}

                <div class="gallery-item__overlay">
                  <h3 class="gallery-item__title">{{ block.settings.title }}</h3>
                  <div class="gallery-item__description">{{ block.settings.description }}</div>
                </div>
              </div>
              {%- if block.settings.title != blank or block.settings.description != blank -%}
                <div class="gallery-item__overlay-mobile">
                  {%- if block.settings.title != blank -%}
                    <h3 class="gallery-item__title">{{ block.settings.title }}</h3>
                  {%- endif -%}
                  {%- if block.settings.description != blank -%}
                    <div class="gallery-item__description">{{ block.settings.description }}</div>
                  {%- endif -%}
                </div>
              {%- endif -%}
                
            </div>
          {%- endif -%}
        {%- endfor -%}
      </div>
    {%- endif -%}
  {%- endfor -%}
  </div>
</gallery-tab>
<style>
  html body .media-wrapper.desktop{
    display:flex;
  }
  html body .media-wrapper.mobile{
    display:none;
  }
  @media(max-width:768px){
    html body .media-wrapper.desktop{
      display:none;
    }
    html body .media-wrapper.mobile{
      display:flex;
    }
  }
</style>
{% schema %}
{
  "name": "Kiks Gallery Tab",
  "tag": "section",
  "class": "kiks-gallery-tab",
  "settings": [
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Feature Gallery"
    },
    {
    "type": "richtext",
    "id": "section_description",
    "default": "<p>Max 2 is your portable workstation, gaming hub, and entertainment center—all in one feather-light frame. Stay productive and entertained wherever you go.</p>",
    "label": "Description"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "label": "Color scheme",
      "options": [
        {
          "value": "primary",
          "label": "Primary"
        },
        {
          "value": "secondary",
          "label": "Secondary"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "white",
          "label": "White"
        },
        {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "white"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "tab_active_color",
      "label": "Active tab color",
      "default": "#0066FF"
    },
    {
      "type": "color",
      "id": "tab_text_color",
      "label": "Tab text color",
      "default": "#FFFFFF"
    },
    {
        "type": "checkbox",
        "id": "enable_adjust_h_tag",
        "label": "Enable adjust H tag",
        "default": false
    },
    {
        "type": "select",
        "id": "adjust_h_tag_to",
        "label": "Adjust the H tag to",
        "options": [
            {
            "value": "h1",
            "label": "H1"
            },
            {
            "value": "h2",
            "label": "H2"
            },
            {
            "value": "h3",
            "label": "H3"
            },
            {
            "value": "h4",
            "label": "H4"
            },
            {
            "value": "h5",
            "label": "H5"
            },
            {
            "value": "h6",
            "label": "H6"
            }
        ],
        "default":   "h3"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "checkbox",
      "id": "enable_masonry",
      "label": "Enable masonry layout",
      "default": false
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "label": "Desktop columns",
      "min": 1,
      "max": 4,
      "default": 3,
      "step": 1
    },
    {
      "type": "range",
      "id": "columns_tablet",
      "label": "Tablet columns",
      "min": 1,
      "max": 4,
      "default": 2,
      "step": 1
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "label": "Mobile columns",
      "options": [
        {
          "value": "1",
          "label": "1 column"
        },
        {
          "value": "2",
          "label": "2 columns"
        }
      ],
      "default": "1"
    },
    {
      "type": "range",
      "id": "gap_size",
      "label": "Gap between items",
      "min": 10,
      "max": 40,
      "step": 5,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "column_text_position",
      "label": "Column text position",
      "info": "This setting is only for mobile.",
      "options": [
        {
          "value": "overlay",
          "label": "Overlay"
        },
        {
          "value": "bottom",
          "label": "Bottom"
        },
        {
          "value": "top",
          "label": "Top"
        }
      ],
      "default": "overlay"
    },
    {
      "type": "header",
      "content": "Overlay"
    },
    {
      "type": "color",
      "id": "overlay_color",
      "label": "Overlay color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "overlay_opacity",
      "label": "Overlay opacity",
      "min": 0,
      "max": 1,
      "step": 0.1,
      "default": 0.4
    },
    {
        "type": "header",
        "content": "Kikstart Spacing Settings"
    },
    {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding top",
        "default": 64
    },
    {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding Bottom",
        "default": 64
    },
    {
        "type": "range",
        "id": "padding_top_mob",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "For Mobile Padding top",
        "default": 48
    },
    {
        "type": "range",
        "id": "padding_bottom_mob",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "For Mobile Padding Bottom",
        "default": 48
    }
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "limit": 5,
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Tab title",
          "default": "Tab"
        },
        {
          "type": "text",
          "id": "tab_id",
          "label": "Tab ID",
          "info": "Unique identifier for this tab. Used to link gallery items to this tab.",
          "default": "tab1"
        }
      ]
    },
    {
      "type": "gallery_item",
      "name": "Gallery Item",
      "settings": [
        {
          "type": "text",
          "id": "tab_id",
          "label": "Tab ID",
          "info": "Enter the Tab ID of the tab this item belongs to (e.g., tab1, tab2, etc)"
        },
        {
          "type": "header",
          "content": "Layout Settings"
        },
        {
          "type": "select",
          "id": "masonry_size",
          "label": "Item size in masonry layout",
          "options": [
            {
              "value": "default",
              "label": "Default"
            },
            {
              "value": "vertical",
              "label": "Vertical (2 rows)"
            },
            {
              "value": "horizontal",
              "label": "Horizontal (2 columns)"
            },
            {
              "value": "large",
              "label": "Large (2x2)"
            }
          ],
          "default": "default"
        },
        {
          "type": "select",
          "id": "content_type",
          "label": "Content type",
          "options": [
            {
              "value": "image",
              "label": "Image"
            },
            {
              "value": "video",
              "label": "Video"
            }
          ],
          "default": "image"
        },
        {
          "type": "header",
          "content": "Media"
        },
        {
          "type": "image_picker",
          "id": "desktop_image",
          "label": "Desktop image"
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "Mobile image (optional)"
        },
        {
          "type": "video",
          "id": "video_shopify",
          "label": "Video upload (Desktop)",
          "info": "Upload video using Shopify. Replaces external video if both are set."
        },
        {
          "type": "video",
          "id": "video_shopify_mobile",
          "label": "Video upload (Mobile)",
          "info": "Optional mobile video. Desktop video will be used if not set."
        },
        {
          "type": "text",
          "id": "video_url",
          "label": "External video URL",
          "info": "Supports YouTube and Vimeo URLs"
        },
        {
          "type": "image_picker",
          "id": "poster_image",
          "label": "Video poster image",
          "info": "Shown before video plays"
        },
        {
          "type": "header",
          "content": "Content"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Item title"
        },
        {
            "type": "richtext",
            "id": "description",
            "default": "<p>Max 2 is your portable workstation, gaming hub, and entertainment center—all in one feather-light frame. Stay productive and entertained wherever you go.</p>",
            "label": "Description"
        },
        {
          "type": "checkbox",
          "id": "autoplay",
          "label": "Autoplay video",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "loop",
          "label": "Loop video",
          "default": true
        },
        {
          "type": "select",
          "id": "video_type",
          "label": "Video source",
          "options": [
            {
              "value": "shopify",
              "label": "Shopify video"
            },
            {
              "value": "external",
              "label": "External video (YouTube, Vimeo)"
            }
          ],
          "default": "shopify"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Kiks Gallery Tab",
      "blocks": [
        {
          "type": "tab",
          "settings": {
            "title": "Features",
            "tab_id": "features"
          }
        },
        {
          "type": "tab",
          "settings": {
            "title": "Benefits",
            "tab_id": "benefits"
          }
        },
        {
          "type": "gallery_item",
          "settings": {
            "title": "Amazing Feature",
            "tab_id": "features"
          }
        },
        {
          "type": "gallery_item",
          "settings": {
            "title": "Great Benefit",
            "tab_id": "benefits"
          }
        }
      ]
    }
  ]
}
{% endschema %}
